<!-- 帖子 -->
<template>
  <el-main style="padding: 20px;">
    <el-radio-group v-model="radio">
      <el-radio :label="item.categoryCode" v-for="(item, index) of type" :key="index">{{ item.categoryName }}</el-radio>
    </el-radio-group>
    <el-button v-if="radio==1"  style="margin-left: 20px;" type="primary" size="mini" icon="el-icon-plus" @click="tianjia=true;lun=true">
      添加轮播图
    </el-button>

    <el-dialog
      :visible.sync="tianjia"
      width="80%">
      <el-form ref="form" :model="form" label-width="80px">
          <el-upload
            :disabled="disabled"
            :multiple="false"
            :action="url"
            name="fileData"
            :on-success="onsuss"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
          <el-button v-if="lun==true" type="primary" style="margin-top: 20rpx;" @click="tian">确定</el-button>
          <el-button v-else type="primary" style="margin-top: 20rpx;" @click="tianhuan">替换</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <div class="table-box">
      <el-table :data="Lunbo" style="width: 100%">
        <el-table-column prop="" label="图片" width="600">
        	 <template slot-scope="scope">
                  <img v-if="radio==1" style="width: 50%;" :src="scope.row.cover" alt="">
                  <img v-else style="width: 50%;" :src="scope.row.picsUrl" alt="">
             </template>
        </el-table-column>
               <el-table-column label="操作">
         <template slot-scope="scope">
            <el-button v-if="radio==1" type="text" size="mini" @click="deleteObj(scope.row)">删除</el-button>
            <el-button v-else type="text" size="mini" @click="tihuan(scope.row)">替换</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      form:{},
      dialogImageUrl:'',
      // url:'https://api.shida123.cn/front/file/upload',
      url: 'http://syt12322.6655.la/front/file/upload',
      // url: 'http://localhost:8082/front/file/upload',
      type: [
        {categoryCode:1,categoryName:'轮播图'}
      ],
      tianjia:false,
      Lunbo:[],
      radio:1,
      imgUrl:[],
      disabled:false,
      lun:true,
      shuju:{}
    };
  },
  watch:{
    radio(){
      if(this.radio==1){
        this.getLun()
      }else{
        this.getQi()
      }
    }
  },
  inject:['reload'],
  mounted: function() {
    this.getLun()
  },
  methods: {
    tianhuan(){
      let that = this;
      let params = {
        "picsUrl": this.imgUrl,
      }
      this.postJson(`/shop/banner/save`,params).then(res => {
        //console.log(res)
        if(res.data.code==10000){
          that.postRequest(`/shop/banner/update?id=${that.shuju.id}`).then(res => {
            //console.log(res)
            that.$message(res.data.msg);
            that.reload()
          });
        }
      });
    },
    tian(){
        let params = {
        "url": this.imgUrl
        }
        this.postJson('/shop/banner/save',params).then(res => {
          //console.log(res)
          this.$message(res.data.msg);
          this.reload()
        });
    },
    handleRemove(file, fileList) {
      //console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      //console.log(this.dialogImageUrl)
      this.dialogVisible = true;
      this.reload()
    },
    getQi(){
      this.postRequest(`/back/startpics/getStartPicsList`).then(res => {
        //console.log(res)
        this.Lunbo = res.data.data
      });
    },
    getLun(){
      this.getRequest("/shop/banner/list?pageNo=" + 1 + "&pageSize=5").then((res) => {
        //console.log(res)
        this.Lunbo = res.data.data.arrays
        //console.log(this.Lunbo)
      });
    },
    onsuss(response, file, fileList){
      //console.log(response.url)
      this.imgUrl=response.url;
      this.disabled = true;
    },
    tihuan(e){
      this.shuju = e;
      this.lun=false;
      this.tianjia=true;
    },
    deleteObj(e){
      this.postRequest(`/shop/banner/delete?ids=${e.id}`).then(res => {
        //console.log(res)
        this.$message(res.data.msg);
        this.reload()
      });
    },
  }
};
</script>

<style></style>
